<template>
	<div class="discount_goods">
		<x-header :left-options="{backText: '',preventGoBack: true	}" @on-click-back="goBack" title="折扣商品活动">
		</x-header>
		<div class="content" v-if="datas">
			<div class="content_top">
				<div class="content_top_title">
					<p v-if="datas.coupon_usage === 1">满减</p>
					<p v-if="datas.coupon_usage === 2">直减</p>
					<p v-if="!isEnd">进行中&nbsp;剩余<span>{{ datas.expire_date | differDays }}天</span></p>
					<p v-if="isEnd">已结束</p>
				</div>
				<div class="content_top_detail">
					<p>
						<span>活动类型：</span>
						<span v-if="datas.coupon_usage === 1">满减</span>
						<span v-if="datas.coupon_usage === 2">直减</span>
					</p>
					<p>
						<span>面向用户：</span>
						<span v-if="datas.coupon_mode === 1">用户领取</span>
						<span v-if="datas.coupon_mode === 2">直接使用</span>
						<span v-if="datas.coupon_mode === 3">支付满返券</span>
						<span v-if="datas.coupon_mode === 4">本店新用户</span>
						<span v-if="datas.coupon_mode === 5">平台新用户</span>
					</p>
					<p>
						<span>名称：</span>
						<span>{{ datas.name }}</span>
					</p>
					<p>
						<span>成本承担：</span>
						<span>商家承担{{ datas.amount }}元</span>
					</p>
					<p>
						<span>开始时间：</span>
						<span>{{ datas.start_date }}</span>
					</p>
					<p>
						<span>结束时间：</span>
						<span>{{ datas.expire_date }}</span>
					</p>
					<p>
						<span>创建日期：</span>
						<span>{{ datas.created }}</span>
					</p>
				</div>
			</div>
			<div class="act_effect">
				<div class="act_effect_title">
					<p>活动效果（展示2017.05.25之后数据）</p>
					<p @click="goIn">指标说明</p>
				</div>
				<div class="act_summarize">
					<div class="act_summarize_title">活动效果概览（当日数据第二日才可查看）</div>
					<div class="act_summarize_table">
						<x-table :full-bordered="true">
							<thead>
								<tr>
									<th>昨日商品销量</th>
									<th>总计商品销量</th>
									<th>昨日流水</th>
									<th>总计流水</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td v-if="datas.yesterday">{{ datas.yesterday.amount }}份</td>
									<td v-else>0份</td>
									<td>{{ datas.count }}份</td>
									<td v-if="datas.yesterday">{{ datas.yesterday.money }}元</td>
									<td v-else>0元</td>
									<td>{{ datas.money }}元</td>
								</tr>
							</tbody>
						</x-table>
					</div>
					<div class="act_summarize_charts">
						<h3>近七日活动效果趋势({{ sevenDate | filterTimes }}-{{ oneDate | filterTimes }})</h3>
						<x-chart v-if="flags" :id="id" :option="option"></x-chart>
					</div>
					<div class="everyday_detail">
						<div class="everyday_detail_title">每日活动详情（可查看近90日活动详情数据）</div>
						<div class="everyday_detail_lists">
							<x-table :full-bordered="true">
								<thead>
									<tr>
										<th>日期</th>
										<th>活动本日销量</th>
										<th>活动本日带动流水</th>
									</tr>
								</thead>
								<tbody>
									<tr v-for="(item,index) in allData" :key="index">
										<td>{{ item.day_time }}</td>
										<td>{{ item.amount }}份</td>
										<td>{{ item.money }}元</td>
									</tr>
								</tbody>
							</x-table>
						</div>
						<div v-if="isShowMore" class="load_more" @click="loadMore">加载更多</div>
					</div>
				</div>
			</div>
			<footer>
				<button @click="cancels">撤销</button>
			</footer>
		</div>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie.js'
	import { XHeader, XTable } from 'vux';
	import XChart from '@/page/activity/act_chart';
	import options from '@/assets/js/act_option';
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'discount_goods',
		data() {
			let option = options.bar
			return {
				id: 'test',
				option: option,
				isShowMore: true,
				allData: [], //近90天所有数据
				datas: '', //详情数据				
				isEnd: false,
				flags: false,
				oneDate: '',
				sevenDate: '',
				page: 1,
				pageSize: 30,
				flagss: true,
				params: '',
			}
		},
		components: {
			XChart,
			XHeader,
			XTable
		},
		computed: {

		},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			
			let d1 = new Date();
			d1.setTime(d1.getTime() - 24 * 1 * 60 * 60 * 1000);
			this.oneDate = d1;
			let d2 = new Date();
			d2.setTime(d2.getTime() - 24 * 2 * 60 * 60 * 1000);
			let d3 = new Date();
			d3.setTime(d3.getTime() - 24 * 3 * 60 * 60 * 1000);
			let d4 = new Date();
			d4.setTime(d4.getTime() - 24 * 4 * 60 * 60 * 1000);
			let d5 = new Date();
			d5.setTime(d5.getTime() - 24 * 5 * 60 * 60 * 1000);
			let d6 = new Date();
			d6.setTime(d6.getTime() - 24 * 6 * 60 * 60 * 1000);
			let d7 = new Date();
			d7.setTime(d7.getTime() - 24 * 7 * 60 * 60 * 1000);
			this.sevenDate = d7;
			
			this.$axiosPost('/coupon/view/processinfo' + this.params, {
				coupon_id: this.$route.params.id
			}).then(res => {
				if(res.code === 200) {
					this.datas = res.tickets;					
					this.flags = true;
					this.option.series[0].data = res.tickets.seven.amount;
					this.option.series[1].data = res.tickets.seven.money;
					this.option.xAxis.categories[0] = this.formats(d7);
					this.option.xAxis.categories[1] = this.formats(d6);
					this.option.xAxis.categories[2] = this.formats(d5);
					this.option.xAxis.categories[3] = this.formats(d4);
					this.option.xAxis.categories[4] = this.formats(d3);
					this.option.xAxis.categories[5] = this.formats(d2);
					this.option.xAxis.categories[6] = this.formats(d1);
					if(new Date(res.tickets.expire_date).getTime() - new Date().getTime() > 0) {
						this.isEnd = false;
					} else {
						this.isEnd = true;
					}
				}
			})
			this.ninety();
		},
		methods: {
			//90日数据
			ninety() {
				this.$vux.loading.show({
					text: ''
				});
				let obj = {};
				obj.coupon_id = this.$route.params.id;
				obj.page = this.page;
				obj.limit = this.pageSize;
				this.$axiosPost('/coupon/view/ninety' + this.params, obj).then(res => {
					if(res.code === 200) {
						this.$vux.loading.hide();
						this.allData = this.allData.concat(res.ninety);
						if(res.ninety.length < this.pageSize) {
							this.isShowMore = false;
						}
						if(this.allData.length >= 90) {
							this.allData.length = 90;
							this.isShowMore = false;
						}
					}
				})
			},
			//返回
			goBack() {
				this.$router.push('/actList/1');
			},
			//指标说明
			goIn() {
				this.$router.push('/indicatorDesc');
			},
			//加载更多
			loadMore() {
				this.page++;
				this.ninety();
			},
			//撤销
			cancels() {
				let self = this;
				if(!this.flagss) {
					return;
				}
				this.$vux.confirm.show({
					title: '提示',
					content: '确定撤销吗',
					onConfirm() {
						self.$axiosPost('/coupon/view/canceled' + this.params, {
							coupon_id: self.$route.params.id
						}).then(res => {
							self.flagss = false;
							if(res.code === 200) {
								self.$vux.toast.show({
									text: '操作成功',
									position: 'middle'
								})
								setTimeout(() => self.$router.push('/actList/1'), 1500);
							}
						})
					}
				})
			},
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
		},
		filters: {
			differDays(val) {
				var dd = new Date(val);
				var d3 = new Date();
				var ss = dd.getTime() - d3.getTime();
				if(ss <= 0) {
					return 0;
				}
				return Math.floor(ss / 86400000);
			},
			filterTimes(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "." + m + "." + d;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.discount_goods {
		.content {
			background: #fff;
			.content_top {
				border-top: .2rem solid #efefef;
				.content_top_title {
					display: flex;
					justify-content: space-between;
					padding: .3rem;
					border-bottom: 1px solid #efefef;
					p:nth-of-type(1) {
						color: #2a2a2a;
					}
					p:nth-of-type(2) {
						color: #9a9a9a;
						span {
							color: #ffbe4d;
						}
					}
				}
				.content_top_detail {
					padding-bottom: .3rem;
					p {
						display: flex;
						margin-top: .3rem;
						padding: 0 .1rem 0 .3rem;
						span:nth-of-type(1) {
							width: 1.5rem;
							text-align: right;
							white-space: nowrap;
							color: #a0a0a0;
						}
						span:nth-of-type(2) {
							color: #000;
							text-align: left;
							margin-left: .1rem;
							padding-right: .1rem;
						}
					}
				}
			}
			.act_effect {
				border-top: .2rem solid #efefef;
				.act_effect_title {
					display: flex;
					justify-content: space-between;
					padding: .3rem;
					border-bottom: 1px solid #efefef;
					p:nth-of-type(2) {
						color: #06c1ae;
					}
				}
				.act_summarize {
					.act_summarize_title {
						text-align: left;
						padding: .3rem;
						color: #a0a0a0;
					}
					.act_summarize_table {
						width: 91%;
						margin: 0 auto .8rem auto;
					}
					.act_summarize_charts {
						h3 {
							text-align: left;
							padding: .3rem;
							font-size: .26rem;
							color: #a0a0a0;
						}
					}
					.everyday_detail {
						padding-bottom: .7rem;
						.everyday_detail_title {
							display: flex;
							justify-content: space-between;
							padding: .3rem;
							color: #a0a0a0;
						}
						.load_more {
							width: 90%;
							margin: .2rem auto 0 auto;
							padding: .2rem 0;
							border: 1px solid #ddd;
							border-radius: .05rem;
						}
					}
				}
			}
			footer {
				background: #efefef;
				padding: .45rem 0;
				button {
					width: 90%;
					border: none;
					outline: none;
					border-radius: .05rem;
					padding: .2rem 0;
					background: #06c1ae;
					font-size: .34rem;
					color: #fff;
				}
			}
		}
	}
</style>